<template>
	<view>
		<view class="content">
			<view class="content_top">
				<image src="../../static/icon9.png"></image>
				<view>
					<text>运单号：{{tWaybill.waybillNumber}}</text>
					<text>{{tWaybill.creationTime}}</text>
				</view>
				<view class="daibaojia">
					<text>待报价</text>
				</view>
			</view>
			<view class="description_box">
				<text>{{tWaybill.shipZone}}</text>
				<image src="../../static/iocn4.png">
					<text>{{tWaybill.receiveZone}}</text>
			</view>
			<view class="description_top">
				<text>货物信息：{{tWaybill.goodsName}} / {{tWaybill.goodsPackagMethod}} /{{ tWaybill.goodsSize}}m³ /{{ tWaybill.goodsWeight}}T </text>
				<text>车辆信息：{{ tWaybill.lesscarload}} / {{ tWaybill.demandLength}} /{{ tWaybill.demandLoad}}T /{{ tWaybill.demandStyle}}</text>
			</view>
			<view class="descrip_top">
				<view class="box_box">装</view>
				<view class="descr_box">
					<text v-if="tWaybill.shipCompany=='null'">个体经营</text>
					<text v-else>{{tWaybill.shipCompany}}</text>
					<text>{{ tWaybill.shipAddress}}</text>
				</view>
			</view>
			<view class="descrip_top">
				<view class="box_key">卸</view>
				<view class="descr_box">
					<text v-if="tWaybill.receiveCompany==''">个体经营</text>
					<text v-else>{{tWaybill.receiveCompany}}</text>
					<text>{{ tWaybill.receiveAddress}}</text>
				</view>
			</view>
			<view class="content_box">
				<view>
					<text>路程全长：</text>
					<text class="box">{{ tWaybill.totalDistance}} 公里</text>
					
				</view>
                   <view class="money">
						<text>总运费: </text>
						<text style="color: #EF4D3D;font-weight: 600;">&nbsp;{{tWaybill.amountTotal}}</text>
						<text>元</text>
					</view>
			</view>
			<view class="products">
				<image src="../../static/iocn8.png"></image>
				<view>
					<text>货主: {{ tWaybill.shipContact}}</text>
					
				</view>
				<text class="textb" v-if="tWaybill.invoiced== false">（不需开票）</text>
				<text class="textb" v-else>（需要开票）</text>
			</view>

		</view>
		<view class="content1">
			<view class="dingjin">
				<text>我要报价</text>
				<text>(<text>*</text>为必填)</text>
			</view>
			<view class="zongyunfei">
				<text>*</text>
				<text>运费</text>
				<input type="number" v-model="zongyunfei" placeholder="请输入金额"><text>元</text>
			</view>
			<p>运费范围：50~50000元</p>
			<view class="dingjin1">
				<text>*</text>
				<text>订金</text>
				<input type="number" v-model="dingjin" placeholder="请输入金额"><text>元</text>
			</view>
			<p>订金范围：50~500元</p>
		</view>
		<view class="footer">
			<view class="footer_fl">
				<text class="box_top">￥{{parseInt(zongyunfei)+parseInt(dingjin)}}元</text>
				<text class="box_box">实际运费</text>
			</view>
			<view class="footer_ft" @click="dakai()">联系货主</view>
			<view class="footer_fr" @click="WayBillOffer()">确认报价</view>
		</view>


		<!-- 弹窗 -->
		<view class="screenshot" v-show="notification" @click="guanbi()">
			<view class="screenshot_key">
				<image src="../../static/iocn10.png" class="image_top"></image>
				<image src="../../static/iocn7.png" class="image_gb"></image>
				<view class="screenshot_top">仅限使用注册号码拨打</view>
				<view class="screenshot_box">{{ mobile}}</view>
				<view class="screenshot_zhen" @click.stop="bohao()">立即拨号</view>
				<view class="screenshot_lis">已为您提供号码保护，支付定金后可查看真实号码</view>
			</view>
		</view>

		<view>
			<u-modal :show="show" :showCancelButton="true" @confirm="confirm()" @cancel="cancel" title="确认报价" :content='content'></u-modal>
		</view>

	</view>
</template>

<script>
	import {
		GetWayBillDetail,
		CallRecordCreate,
		WayBillOffer
	} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	export default {
		data() {
			return {
				notification: false,
				id: '',
				tWaybill: {},
				zongyunfei: '', //报价
				dingjin: '', //订金
				show: false,
				title: '确认订单',
				content: '',
				mobile:''
			};
		},
		onLoad(options) {
			this.GetWayBillDetail(options)
		},
		methods: {
			dakai() {
				this.notification = true
			},
			guanbi() {
				this.notification = false
			},

			// 获取报价详情
			async GetWayBillDetail(options) {
				var id = options.id
				console.log('id号', id)
				console.log('huoqu', options)
				try {
					const {
						data: res
					} = await GetWayBillDetail({
						id
					})
					this.tWaybill = res.result
					this.mobile=res.result.shipTelphone
                    console.log(this.tWaybill)
				} catch (e) {}
			},


			// 拨打电话
			bohao() {
				let phone = this.mobile
				uni.makePhoneCall({
					phoneNumber: phone,
					success: (res) => {
						this.CallRecordCreate();
					},
					fail: (res) => {
						console.log('打电话失败了');
					}
				})
			},

			// 创建通话记录
			async CallRecordCreate() {
				var waybillId = this.tWaybill.id
				var driverId = this.tWaybill.driverId
				var consignorId = this.tWaybill.shiperId
				try {
					const {
						data: res
					} = await CallRecordCreate({
						waybillId,
						driverId,
						consignorId
					})

				} catch (e) {}
			},


			// 确认报价  确认运单
			async WayBillOffer() {
				this.show=false
				var id = this.tWaybill.id
				var deposit = this.dingjin
				var offer = this.zongyunfei
				var driverId = getValue('id')
				if(offer==undefined || offer.length==0 || offer.length==''){
					uni.showToast({
						title: "运费不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if(deposit==undefined ||deposit=='' ||  deposit.length==0 ){
					uni.showToast({
						title: "订金不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				this.show=true
				// try {
				// 	this.confirm(id,deposit,offer,driverId)
				// } catch (e) {}
			},

			// 确认
			async  confirm() {
				var id = this.tWaybill.id
				var deposit = this.dingjin
				var offer = this.zongyunfei
				var driverId = getValue('id')
				const {
					data: res
				} = await WayBillOffer({
					id,
					deposit,
					offer,
					driverId
				}).then((res)=>{
					uni.showToast({
						title: "成功",
						icon: 'none',
					})
					console.log('123123',res)
					this.show = false;
						uni.reLaunch({
							url:'/pages/index/sjindex'
						})
				})
				
				
			},
			// 取消
			cancel() {
				this.show = false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 0 15upx;
	}

	.content {
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
		margin-top: 15upx;

		.content_top {
			display: flex;
			align-items: center;
			padding: 15upx 40upx;
              width: 1000upx;
			image {
				width: 51upx;
				height: 51upx;
			}

			view {
				padding-left: 30upx;

				text {
					display: block;
					font-size: 24.53upx;
					font-weight: 400;
					color: #383838;
				}
			}

			.daibaojia {
				margin-left: 170upx;

				text {
					width: 100upx;
					font-size: 24upx;
					color: #EF4D3D;
					font-weight: 600;
				}

			}
		}

		.description_box {
			width: 100%;
			height: 75.35upx;
			opacity: 1;
			background: #F0F0F0;
			padding: 0 60upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
           
			text {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 26upx;
				color: #000;
				font-weight: bold;
			}

			image {
				width: 112upx;
				height: 112upx;
			}
		}

		.description_top {
			padding: 0 50upx;

			text {
				display: block;
				font-size: 24.53upx;
				color: #383838;
				padding-top: 20upx;
			}
		}

		.descrip_top {
			margin-top: 20upx;
			height: 75upx;
			opacity: 1;
			background: #F0F0F0;
			padding: 0 40upx;
			display: flex;
			align-items: center;

			.box_box {
				width: 56upx;
				height: 56upx;
				opacity: 1;
				border-radius: 10upx;
				background: #FFC300;
				font-size: 38upx;
				font-weight: bold;
				color: #fff;
				text-align: center;
				line-height: 56upx;
			}

			.box_key {
				width: 56upx;
				height: 56upx;
				opacity: 1;
				border-radius: 10upx;
				background: #EF4D3D;
				font-size: 38upx;
				font-weight: bold;
				color: #fff;
				text-align: center;
				line-height: 56upx;
			}

			.descr_box {
				padding-left: 28upx;

				text {
					display: block;
					font-size: 22upx;
					color: #000;
				}
			}
		}

		.content_box {
			padding: 0 40upx 30upx;
			border-bottom: 2upx solid #E5E5E5;

			view {
				display: flex;
				align-items: center;
				padding-top: 12upx;

				text {
					font-size: 24upx;
					color: #000;
					font-weight: bold;
				}

				.box {
					color: #EF4D3D;
				}
			}
		}

		.products {
			padding: 20upx 45upx;
			display: flex;
			align-items: center;

			image {
				width: 98upx;
				height: 98upx;
			}

			view {
				padding-left: 25upx;

				text {
					display: block;
					font-size: 24upx;
					color: #383838;
					padding: 5upx 0;
				}
			}
			.textb{
				font-size: 28upx;
				color: #EF4D3D;
				margin-left: 230upx;
			}
		}

		.products_box {
			padding: 0 45upx 20upx;

			view {
				display: flex;
				align-items: center;

				text {
					font-size: 28upx;
					font-weight: bold;
				}

				.text_a {
					color: #EF4D3D;
				}

				.text_b {
					color: #808080;
				}
			}
		}

		border-radius: 20upx;
	}

	.content1 {
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
		margin-top: 15upx;
		border-radius: 20upx;

		.dingjin {
			padding: 20upx 20upx;
			border-bottom: 1px solid rgba(229, 229, 229, 1);
			margin-top: 10upx;

			text:nth-child(1) {
				color: #EF4D3D;
				padding: 10upx;
				font-size: 24upx;
			}

			text:nth-child(2) {
				color: rgba(128, 128, 128, 1);
				padding: 10upx;
				font-size: 24upx;
			}
		}

		.zongyunfei {
			width: 100%;
			line-height: 120upx;
			display: flex;
			align-items: center;
			padding-left: 80upx;
			font-size: 24upx;

			input {
				border: 1px solid rgba(56, 56, 56, 1);
				text-align: center;
				height: 55upx;
				margin: 0 30upx;
			}
            text:nth-child(2){
            	width: 60upx;
            }
			text:nth-child(1) {
				color: #EF4D3D;
			}
		}

		p {
			text-align: left;
			margin-left: 180upx;
			font-size: 24upx;
			color: #EF4D3D;
			margin-top: -30upx;
			padding-bottom: 20upx;
		}
		

		.dingjin1 {
			width: 100%;
			line-height: 120upx;
			display: flex;
			align-items: center;
			padding-left: 80upx;
			font-size: 24upx;
            margin-top: -28upx;
			input {
				border: 1px solid rgba(56, 56, 56, 1);
				text-align: center;
				height: 55upx;
				margin: 0 30upx;
			}
            text:nth-child(2){
				width: 60upx;
			}
			text:nth-child(1) {
				color: #EF4D3D;
				 
			}
		}
	}

	.footer {
		width: 750upx;
		opacity: 1;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 30upx 35upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.footer_fl {
			.box_top {
				font-size: 28upx;
				color: #F04D3E;
				font-weight: bold;
				display: block;
				text-align: right;
			}

			.box_box {
				font-size: 22.78upx;
				color: #000;
				text-align: right;
				display: block;
			}
		}

		.footer_ft {
			margin-left: 150upx;
			width: 191upx;
			height: 70upx;
			opacity: 1;
			border-radius: 17.52upx;
			background: #FFFFFF;
			border: 2upx solid #EF4D3D;
			font-size: 31.54upx;
			color: #EF4D3D;
			text-align: center;
			line-height: 66upx;
			font-weight: bold;
		}

		.footer_fr {
			width: 191upx;
			height: 70upx;
			opacity: 1;
			border-radius: 17.52upx;
			background: #EF4D3D;
			font-size: 31.54upx;
			color: #fff;
			text-align: center;
			line-height: 66upx;
			font-weight: bold;
		}
	}



	.screenshot {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;

		.screenshot_key {
			width: 720upx;
			height: 480upx;
			opacity: 1;
			background: #FFFFFF;
			box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
			border-radius: 20upx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding-top: 20upx;

			.image_top {
				width: 100upx;
				height: 100upx;
				margin: 0 auto;
				display: block;
			}

			.image_gb {
				width: 32upx;
				height: 32upx;
				position: absolute;
				top: 8upx;
				right: 48upx;
			}

			.screenshot_top {
				font-size: 28upx;
				color: #000;
				text-align: center;
				padding-top: 30upx;
			}

			.screenshot_box {
				font-size: 38upx;
				font-weight: bold;
				color: #000;
				text-align: center;
				padding-top: 20upx;
			}

			.screenshot_zhen {
				width: 601upx;
				height: 71upx;
				opacity: 1;
				border-radius: 17.52upx;
				background: #FFFFFF;
				line-height: 65upx;
				border: 3upx solid #F04D3E;
				font-size: 31.54upx;
				text-align: center;
				font-weight: bold;
				margin: 0 auto;
				margin-top: 50upx;
			}

			.screenshot_lis {
				font-size: 24upx;
				color: #808080;
				text-align: center;
				padding-top: 20upx;
			}

		}
	}
	
	.money{
		display: flex;
		align-items: center;
		text:first-child{
			padding-right: 8upx;
		}
	}
</style>
